<!-- @format -->

<template>
    <div>
        <h1>test</h1>
    </div>

    <section>
        <p>{{ temp }}</p>
        <p>{{ height }}</p>
        <button @click="addTemp">+temp</button>
        <button @click="addHeight">+height</button>
    </section>
    <section>
        <p>{{ info.name }}</p>
        <p>{{ info.nickname }}</p>
        <p>{{ slogan }}</p>

        <input /><button @click="change">修改</button>
    </section>
    <div>
        <p>
            <label>firstName:</label>
            <input :value="firstName" @change="event => (firstName = (event.target as HTMLInputElement).value)" />
        </p>
        <p>lastName:{{ lastName }}</p>
        <p>fullName:{{ fullName }}</p>
    </div>
    {{ word }}

    <Child ref="childRef" :num="num" @add="handleAdd" v-model:word="word" />
    <button @click="handleReset">重置</button>
</template>

<script setup lang="ts">
// import {getCurrentInstance} from 'vue';
// import type {ComponentInternalInstance} from 'vue';
import Child from './child.vue';
// const {proxy} = getCurrentInstance() as ComponentInternalInstance;

const num = ref(0);
const word = ref('什么都没有。。。');
const info = reactive({name: '郑丹妮', nickname: '蒸蛋', age: 23, hobbies: ['唱歌', '跳舞']});

const firstName = ref('John');
const lastName = ref('Doe');

const handleAdd = (val: number) => {
    num.value = val;
};

const change = () => {};

const handleReset = () => {
    // setup之后需要在实例上访问$refs
    // proxy.$refs.childRef.reset();
};

// 计算属性-只读
const slogan = computed(() => {
    return info.name + '的外号叫做' + info.nickname;
});
// 计算属性-可修改
const fullName = computed({
    // getter
    get() {
        return firstName.value + ' ' + lastName.value;
    },
    // setter
    set(newValue) {
        console.log('newValue', newValue);
        // 注意：我们这里使用的是解构赋值语法
        [firstName.value, lastName.value] = newValue.split(' ');
    },
});

watch(num, newVal => {
    console.log(`num changed!now is ${newVal}`);
});

let temp = ref(30);
let height = ref(50);
watchEffect(() => {
    if (temp.value > 50 && height.value > 80) {
        console.log('hahah temp >50 && heihgt>80');
    }
    console.log('something changed');
});
const addTemp = () => {
    temp.value += 10;
};
const addHeight = () => {
    height.value += 10;
};
</script>

<style scoped></style>
